<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="模板选择">
                <el-select v-model="form.page" placeholder="请选择模板">
                    <el-option v-for="item in pageList" :label="item.name" :value="item.id" :key="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="副标题">
                <el-input v-model="form.subTitle"></el-input>
            </el-form-item>
            <el-form-item label="新闻类别">
                <el-cascader :options="newsTypeList" v-model="form.newsTypeList">
                </el-cascader>
            </el-form-item>
            
            <el-form-item label="标签">
                <el-select v-model="form.tagsList" multiple placeholder="请选择" class="tagsDiv">
                    <el-option v-for="item in tagsList" :label="item.label" :value="item.value" :key="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题图">
                <el-upload :action="fileUploadAction" list-type="picture-card" :on-preview="handlePictureCardPreview" :before-upload="infoImageBeforeUpload" :on-success="infoImageUploadSuccess" :on-remove="infoImageRemove" >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="缩略图">
                <el-upload :action="fileUploadAction" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="thumbImageRemove" :before-upload="thumbImageBeforeUpload" :on-success="thumbImageUploadSuccess">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog v-model="dialogVisible" size="tiny">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="其他属性">
                <el-tabs type="border-card">
                    <el-tab-pane v-for="(item, index) in paramList" :label="item.name" :key="item.id">

                        <div v-if="item.type == 'text'">
                            <el-input :placeholder="item.desc" @blur="paramType($event.target.value,item.param)" >
                                <template slot="prepend">{{item.name}}</template>
                            </el-input>
                        </div>
                        <div v-else-if="item.type == 'file'">
                            <el-upload class="upload-demo"  :action="fileUploadAction" :data="{param:item.param}" :on-remove="paramFileRemove" :on-success="paramFileUpload" :file-list="fileList" >
                                <el-button size="small" type="primary">点击上传</el-button>
                            </el-upload>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form-item>
            <el-form-item label="内容">
                <script id="editor" type="text/plain"></script>
            </el-form-item>
            <el-form-item label="seo关键词">
                <el-input v-model="form.seoKeyword"></el-input>
            </el-form-item>
            <el-form-item label="seo介绍">
                <el-input v-model="form.seoDesc"></el-input>
            </el-form-item>
            <el-form-item>
                <div class="btSubmitAddNews">
                    <el-button type="primary" @click="closeAddNewsDialog">取消</el-button>
                    <el-button type="primary" @click="submitAddNewsForm">提交</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import _param from '../common/param.vue'
import _http from '../common/http.vue'

export default {
    data() {
            return {
            	fileUploadAction:_param.param.fileUploadUrl,
                pageList: [],//模板列表
                newsTypeList: [],//新闻类别列表
                tagsList: [],//标签列表
                paramList: [],//动态参数列表
                form: {
                    page: '',
                    title: '',
                    subTitle: '',
                    newsTypeList: [],
                    content: '',
                    tagsList: [],
                    seoKeyword: '',
                    seoDesc: '',
                    param: {},
                    infoImage:{},
                    thumbImage:{}
                },
                paramFileList:[],
                dialogVisible: false,
                dialogImageUrl: '',
                editor: null,
                fileList: [],//初始化文件列表
                uploadList:[],//上传的文件列表
            }
        },
        mounted() {
            _http.axiosRequest(this,'addNewsInitData',{type:_param.param.dtNewsType,infoType:_param.param.newsInfoType},(res)=>{
                this.pageList = res.data.pageList;
                this.newsTypeList = res.data.newsTypeList;
                this.tagsList = res.data.tagsList;
                this.paramList = res.data.paramList;
            })
            this.editor = UE.getEditor('editor');
        },
        destroyed() {
            this.editor.destroy();
        },
        methods: {
//            字面意思失去焦点触发函数
        	paramType(value,obj){
        		if (value.length>0) {
        			this.form.param[obj] = value;
        		}
        	},
//             其他属性，文件上传成功执行的函数
        	paramFileUpload(res,file,fileList){
        		this.uploadList[file.uid] = {
        			name:file.name,
        			url:file.response.url,
        			param:file.response.param
        		}
        	},
//           其他属性 点击上传文件  移除文件列表
        	paramFileRemove(file,fileList){
        		if (this.uploadList[file.uid]) {
        			delete this.uploadList[file.uid]
        		}else{
        			for(let i in this.fileList){
        				for (var j = 0; j < this.fileList[i].length; j++){
        					if (file.uid == this.fileList[i][j]['uid']){
        						delete this.fileList[i][j]
        					}
        				}
        			}
        		}
        	},
//            这是啥?????
        	dealParamFileInfo(){
        		let newFileList= []
        		let _tFileList = this.fileList
        		for (let i in _tFileList) {
        			newFileList[i] = []
        			for (var j = 0; j < _tFileList[i].length; j++) {
        				if (_tFileList[i][j]) {
        					newFileList[i].push({name:_tFileList[i][j]['name'],url:_tFileList[i][j]['url']})
        				}
        			}
        		}
        		let _upFileList= this.uploadList
        		for (let i in _upFileList) {
        			if (newFileList[_upFileList[i]['param']]) {
        				newFileList[_upFileList[i]['param']].push({name:_upFileList[i]['name'],url:_upFileList[i]['url']})
        			}else{
        				newFileList[_upFileList[i]['param']] = []
        				newFileList[_upFileList[i]['param']].push({name:_upFileList[i]['name'],url:_upFileList[i]['url']})
        			}
        		}
        		for(let i in newFileList){
        			this.form.param[i] = newFileList[i]
        		}
        	},
//            文件提交
        	submitAddNewsForm(){
        		this.dealParamFileInfo()
//                这是富文本编辑器
        		this.form.content = this.editor.getContent();

                _http.axiosRequest(this,'addNews',{form:this.form},(res)=>{
                    let result = _http.apiResult(this,res.data)
                    if (result) {
                        this.closeAddNewsDialog()
                    }
                })
        	},
//            标题图上传,文件上传之前
        	infoImageBeforeUpload(file){
        		if (this.form.infoImage.url) {
                    alert('只能允许上传一张');
                    return false;
                }
        	},
//            标题图上传成功
        	infoImageUploadSuccess(res,file,fileList){
        		this.form.infoImage = {
                    url: res.url
                }
        	},
//            文件列表移除文件
        	infoImageRemove(file,fileList){
        		this.form.infoImage={}
        	},
//            缩略图上传之前函数
        	thumbImageBeforeUpload(file){
        		if (this.form.thumbImage.url) {
                    alert('只能允许上传一张');
                    return false;
                }
        	},
//            缩略图上传成功函数
        	thumbImageUploadSuccess(res,file,fileList){
        		this.form.thumbImage = {
                    url: res.url
                }
        	},
//            缩略图文件列表移除文件函数
        	thumbImageRemove(file,fileList){
        		this.form.thumbImage={}
        	},
//                缩略图拿到服务器端返回数据
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
//            取消上传文件
            closeAddNewsDialog(){
                this.$emit('closeAddNewsDialog')
            }
        }
}
</script>
<style>
.tagsDiv {
    width: 100%;
}

.btSubmitAddNews {
    text-align: center;
}
</style>
